<template>
  <view class="entertainment">
    <view style="padding: 0 20rpx">
      <Scroll-row
        :list="type"
        :current="queryForm.smallType"
        key-name="id"
        key-label="name"
        @click="handleStatus"
      />
    </view>
    <Activity-item v-for="(i, k) in dataList" :key="k" :row="i" />
    <u-loadmore :status="status" height="80rpx" />
  </view>
</template>

<script>
import ScrollRow from "@/components/ScrollRow/index";
import ActivityItem from "@/pages/home/cp/ActivityItem";

import { homeActivityList } from "@/request/homeApi.js";
export default {
  components: { ScrollRow, ActivityItem },
  props: {
    // 活动类型
    type: {
      type: Array,
      default: () => {
        return [];
      },
    },
    index: {
      type: Number,
      default: 1,
    },
    page: {
      type: Number,
      default: 1,
    },
  },
  watch: {
    type: {
      handler(v) {
        if (v.length) {
          if (this.index == 1) {
            this.queryForm.smallType = v[0].id;
            this.getDataList();
          }
        }
      },
      immediate: true,
      deep: true,
    },
    page(v) {
      if (v != this.queryForm.page) {
        this.queryForm.page = v;
        this.getDataList();
      }
    },
  },
  data() {
    return {
      queryForm: {
        price: "", // 选择价格
        bigType: "subject", // 类型
        smallType: "", // 分类
        pageSize: 10, // 条数
        page: 1, // 页数
        start_time: "", // 开始时间
        end_time: "", // 结束时间
      },
      status: "loadmore", // 加载状态
      total: 0, // 总数
      dataList: [],
    };
  },
  created() {
    this.getDataList();
  },
  methods: {
    // 切换状态
    handleStatus(v) {
      this.queryForm.smallType = v.id;
      uni.pageScrollTo(); // 滚动到顶部
      this.getDataList();
    },
    // 获取数据列表
    getDataList() {
      this.status = "loading";
      homeActivityList(this.queryForm)
        .then((res) => {
          if (res.code == 1) {
            let list = res.data.list;
            let page = this.queryForm.page;
            this.dataList = page == 1 ? list : this.dataList.concat(list);
            this.total = res.data.total;
            this.$emit("dataTotal", {
              total: this.total,
              dataNum: this.dataList.length,
            });
          }
        })
        .finally(() => {
          this.status = this.total > this.dataList.length ? "loadmore" : "nomore";
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.entertainment {
  .button {
    padding: 0 20rpx 20rpx 0;
    border-bottom: 1rpx solid #d9d9d999;
    view {
      width: 124rpx;
      height: 46rpx;
      line-height: 46rpx;
      text-align: center;
      font-size: 24rpx;
      color: #555555;
      border-radius: 8rpx;
      background-color: #f9fcfc;
    }
    .activeButton {
      font-weight: 600;
      color: $active-color;
      background-color: #e9f4f4;
    }
  }
}
</style>
